<template>
  <div class="auth-container">
    <div class="auth-box">
      <h1 class="title">欢迎注册 SuperChart</h1>
      <p class="description">设置管理员账户并开始使用 SuperChart</p>
      <form @submit.prevent="handleRegister">
        <div class="form-group">
          <label for="email">邮箱地址</label>
          <a-input
            id="email"
            v-model="userInfo.email"
            type="email"
            placeholder="请输入邮箱"
            required
          />
        </div>

        <div class="form-group">
          <label for="email">账号</label>
          <a-input
            id="account"
            v-model="userInfo.account"
            type="text"
            placeholder="请输入账号"
            required
          />
        </div>

        <div class="form-group">
          <label for="name">全名</label>
          <a-input
            id="name"
            v-model="userInfo.name"
            type="text"
            placeholder="请输入您的名字"
            required
          />
        </div>

        <div class="form-group">
          <label >密码</label>
          <a-input-password
            v-model="userInfo.password"
            placeholder="设置一个密码"
            allow-clear
          >
            <template #prefix>
              <icon-lock />
            </template>
          </a-input-password>
        </div>

        <div class="form-group">
          <label >再次确认密码</label>
          <a-input-password
            v-model="userInfo.passwordAgain"
            placeholder="再次确认密码"
            allow-clear
          >
            <template #prefix>
              <icon-lock />
            </template>
          </a-input-password>
        </div>
        <button type="submit" class="primary-button">完成注册</button>
      </form>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from "vue";
  import { useRouter } from 'vue-router';
  import { Message } from '@arco-design/web-vue';
  import { Md5 } from 'ts-md5';
  import { isInstall } from '@/api/install';
  import { register } from "@/api/user";

  const router = useRouter();

  const isInit = async () => {
    const res = await isInstall();
    console.log(res)
  }

  onMounted(() => {
    isInit();
  });

  const userInfo = reactive({
    email: '',
    name: '',
    password: '',
    passwordAgain: '',
    account:''
  });

  const handleRegister = async () => {
    if (userInfo.passwordAgain !== userInfo.password) {
      Message.error('2次密码输入不一致!');
      return;
    }
    const param = {
      email: userInfo.email,
      name: userInfo.name,
      password: Md5.hashStr(userInfo.password),
      passwordAgain: Md5.hashStr(userInfo.passwordAgain),
      account: userInfo.account,
    };
    const res = await register(param);

    await router.push({ name: 'login' });
  };
</script>

<style>
  /* 背景与整体布局 */
  .auth-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: linear-gradient(135deg, #eaf4fc, #d9ecfa);
    font-family: 'Roboto', sans-serif;
  }

  /* 注册框样式 */
  .auth-box {
    background: #ffffff;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 400px;
    text-align: center;
  }

  .title {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
    color: #333333;
  }

  .description {
    font-size: 0.875rem;
    color: #666666;
    margin-bottom: 1.5rem;
  }

  /* 表单样式 */
  .form-group {
    margin-bottom: 1.25rem;
    text-align: left;
  }

  .form-group label {
    font-size: 0.875rem;
    color: #555555;
    display: block;
    margin-bottom: 0.25rem;
  }

  .form-group input {
    width: 100%;
    padding: 0.75rem;
    font-size: 0.875rem;
    border: 1px solid #dddddd;
    border-radius: 4px;
    outline: none;
    transition: border-color 0.3s ease;
  }

  .form-group input:focus {
    border-color: #509ee3;
  }

  /* 按钮样式 */
  .primary-button {
    width: 100%;
    padding: 0.75rem;
    background: linear-gradient(90deg, #509ee3, #2566cf);
    color: #ffffff;
    font-weight: bold;
    font-size: 1rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.3s ease;
  }

  .primary-button:hover {
    background: linear-gradient(90deg, #3d8fd1, #204f9e);
  }
</style>
